<template>
  <div>
    <div class="navbar-div">
      <van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="topimage-div">
      <img :src="goodsInfo.IMAGE1" width="100%" />
    </div>
    <div class="goods-name">{{goodsInfo.NAME}}</div>
    <div class="goods-price">价格:￥{{goodsInfo.PRESENT_PRICE | moneyFilter}}元</div>
    <div>
      <van-tabs swipeable sticky>
        <!-- swipeable滑动切换属性  sticky吸顶效果-->
        <van-tab title="商品详情">
          <div class="detail" v-html="goodsInfo.DETAIL"></div>
        </van-tab>
        <van-tab title="评价">正在制作中</van-tab>
      </van-tabs>
    </div>
    <div class="goods-bottom">
      <div>
        <van-button size="large" type="primary" @click="addGoodsToCart">加入购物车</van-button>
      </div>
      <div>
        <van-button size="large" type="danger">直接购买</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import url from "@/serviceAPI.config.js";
import { toMoney } from "@/filter/moneyFilter.js"; //引入过滤器
import {Toast} from 'vant'
export default {
  data() {
    return {
      goodsId: "",
      goodsInfo: {} //商品详情信息
    };
  },
  filters: {
    moneyFilter(money) {
      return toMoney(money);
    }
  },
  created() {
    this.goodsId = this.$route.params.goodsId? this.$route.params.goodsId: this.$route.query.goodsId; //路由接收值兼容模式
    this.getInfo();
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1); //-1返回前一页
    },
    getInfo() {
      axios({
        method: "POST",
        url: url.goodsInfo,
        data: {
          goodsId: this.goodsId //前端的goodsId传给koa服务器编写商品详情接口的代码里
        }
      })
        .then(res => {
          if (res.data.code == 200 && res.data.message) {
            this.goodsInfo = res.data.message; //读取从koa服务传递过来的message数据.
          } else {
            Toast("服务器错误，数据获取失败");
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //添加商品进购物车
    addGoodsToCart() {
      //取出购物车缓存中的商品
      let cartInfo = localStorage.cartInfo? JSON.parse(localStorage.cartInfo): [];
      let isHaveGoods = cartInfo.find(cartInfo => {
        cartInfo.goodsId == this.goodsId;
      }); //find()如果找到了返回该值，没找到返回undefind
      console.log(cartInfo);
      if (!isHaveGoods) {
        //当购物车没有此商品时,为购物车添加商品
        let newgoodInfo = {
          goodsId: this.goodsInfo.ID,
          name: this.goodsInfo.NAME,
          price: this.goodsInfo.PRESENT_PRICE,
          image: this.goodsInfo.IMAGE1,
          count: 1
        };
        cartInfo.push(newgoodInfo)
        localStorage.cartInfo = JSON.stringify(cartInfo)
        Toast.success('添加成功')
      }else{
         Toast.success('已有此商品')
      }
      this.$router.push({name:'Cart'})//跳转至Cart组件
    }
  }
};
</script>

<style scoped>
.detail {
  /* 解决图片间隙 */
  font-size: 0px;
}
.goods-name {
  background-color: #fff;
}
.goods-price {
  background-color: #fff;
}

.goods-bottom {
  position: fixed;
  bottom: 0px;
  left: 0px;
  background-color: #fff;
  height: 55px;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-flow: nowrap;
}
.goods-bottom > div {
  flex: 1;
  padding: 2px;
}
</style>